<!DOCTYPE html>
<html>

	<head>
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8" />

		<link rel="icon" type="image/ico" href="http://tattek.com/minimal/assets/images/favicon.ico" />
		<!-- Bootstrap -->
		<link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<link rel="stylesheet" href="assets/css/vendor/animate/animate.min.css">
		<link type="text/css" rel="stylesheet" media="all" href="assets/js/vendor/mmenu/css/jquery.mmenu.all.css" />
		<link rel="stylesheet" href="assets/js/vendor/videobackground/css/jquery.videobackground.css">
		<link rel="stylesheet" href="assets/css/vendor/bootstrap-checkbox.css">

		<link rel="stylesheet" href="assets/js/vendor/rickshaw/css/rickshaw.min.css">
		<link rel="stylesheet" href="assets/js/vendor/morris/css/morris.css">
		<link rel="stylesheet" href="assets/js/vendor/tabdrop/css/tabdrop.css">
		<link rel="stylesheet" href="assets/js/vendor/summernote/css/summernote.css">
		<link rel="stylesheet" href="assets/js/vendor/summernote/css/summernote-bs3.css">
		<link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen.min.css">
		<link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen-bootstrap.css">

		<link href="assets/css/minimal.css" rel="stylesheet">
	</head>

	<body class="bg-1">
		<div class="mask">
			<div id="loader"></div>
		</div>
		<div id="wrap">
			<div class="row">

				<!-- 导航栏-->
				<div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation" id="navbar">
					<div class="navbar-header col-md-2">
						<a class="navbar-brand" href="index.html">
							<strong>智慧园区</strong>后台管理
						</a>
						<div class="sidebar-collapse">
							<a href="#">
								<i class="fa fa-bars"></i>
							</a>
						</div>
					</div>
					<div class="navbar-collapse">
						<!--左边刷新按钮-->
						<ul class="nav navbar-nav refresh">
							<li class="divided">
								<a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
							</li>
						</ul>
						<!--右边用户-->
						<ul class="nav navbar-nav quick-actions">
							<li class="dropdown divided user" id="current-user">
								<div class="profile-photo">
								</div>
								<a class="dropdown-toggle options" data-toggle="dropdown" href="#">
									admin<i class="fa fa-caret-down"></i>
								</a>
								<!--鼠标悬浮框-->
								<ul class="dropdown-menu arrow settings">
									<li>
										<h3>背景颜色:</h3>
										<ul id="color-schemes">
											<li>
												<a href="#" class="bg-1"></a>
											</li>
											<li>
												<a href="#" class="bg-2"></a>
											</li>
											<li>
												<a href="#" class="bg-3"></a>
											</li>
											<li>
												<a href="#" class="bg-4"></a>
											</li>
											<li>
												<a href="#" class="bg-5"></a>
											</li>
											<li>
												<a href="#" class="bg-6"></a>
											</li>
										</ul>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"><i class="fa fa-user"></i> Profile</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#"><i class="fa fa-power-off"></i> Logout</a>
									</li>
								</ul>
							</li>
						</ul>

						<!--左下-->
						<ul class="nav navbar-nav side-nav" id="sidebar">
							<li class="collapsed-content">
								<ul>
									<li class="search">
										<!-- Collapsed search pasting here at 768px -->
									</li>
								</ul>
							</li>
							<!--菜单-->
							<li class="navigation" id="navigation">
								<ul class="menu">
									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-list"></i>设备管理<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="device-list.html">
													<i class="fa fa-caret-right"></i>设备列表
												</a>
											</li>
										</ul>
									</li>

									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-list"></i>告警列表<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="warnning-list.html">
													<i class="fa fa-caret-right"></i>历史告警列表
												</a>
											</li>
										</ul>
									</li>

									<li class="dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown">
											<i class="fa fa-pencil"></i>系统管理<b class="fa fa-plus dropdown-plus"></b>
										</a>
										<ul class="dropdown-menu">
											<li>
												<a href="user-list.html">
													<i class="fa fa-caret-right"></i>账号管理
												</a>
											</li>
											<li>
												<a href="role-list.html">
													<i class="fa fa-caret-right"></i>角色管理
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>

				<!--主要内容-->
				<div id="content" class="col-md-12">
					<div class="main">
						<div class="row cards">
							<div class="card-container col-lg-3 col-sm-6 col-sm-12">
								<div class="card card-redbrown hover">
									<div class="front">
										<div class="media">
											<span class="pull-left">
                        <i class="fa fa-users media-object"></i>
                      </span>

											<div class="media-body">
												<small>设备总数</small>
												<h2 class="media-heading animate-number" data-value="2341" data-animation-duration="1500">0</h2>
											</div>
										</div>
									</div>
									<div class="back">
										<a href="#">
											<i class="fa fa-bar-chart-o fa-4x"></i>
											<span>Check Summary</span>
										</a>
									</div>
								</div>
							</div>

							<div class="card-container col-lg-3 col-sm-6 col-sm-12">
								<div class="card card-blue hover">
									<div class="front">

										<div class="media">
											<span class="pull-left">
                        <i class="fa fa-shopping-cart media-object"></i>
                      </span>

											<div class="media-body">
												<small>异常设备</small>
												<h2 class="media-heading animate-number" data-value="18" data-animation-duration="1500">0</h2>
											</div>
										</div>

										<div class="progress-list">
											<div class="details">
												<div class="title">未恢复的告警 6 条</div>
											</div>
										</div>

									</div>
									<div class="back">
										<a href="#">
											<i class="fa fa-bar-chart-o fa-4x"></i>
											<span>Check Summary</span>
										</a>
									</div>
								</div>
							</div>

							<div class="card-container col-lg-3 col-sm-6 col-sm-12">
								<div class="card card-greensea hover">
									<div class="front">

										<div class="media">
											<span class="pull-left">
                        <i class="fa fa-usd media-object"></i>
                      </span>

											<div class="media-body">
												<small>API 列表</small>
												<h2 class="media-heading animate-number" data-value="210" data-animation-duration="1500">0</h2>
											</div>
										</div>
									</div>
									<div class="back">
										<a href="#">
											<i class="fa fa-bar-chart-o fa-4x"></i>
											<span>Check Summary</span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="row">

							<!-- 设备异常汇总表格-->
							<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
								<section class="tile color transparent-black textured">
									<div class="tile-header">
										<h1><strong>设备异常汇总</strong></h1>
									</div>
									<div class="tile-body">
										<div id="bar-example" style="height: 250px;"></div>
									</div>
								</section>
							</div>

							<!-- 未恢复的告警信息 -->
							<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">
								<section class="tile color transparent-black textured">
									<div class="tile-header">
										<h1><strong>未恢复的告警信息</strong></h1>
										<div class="search">
											<input type="text" placeholder="更多...">
										</div>

									</div>
									<!-- /tile header -->
									<div class="tile-body no-vpadding">
										<div class="table-responsive">
											<table class="table table-custom table-sortable nomargin">
												<thead>
													<tr>
														<th>#</th>
														<th>发生时间</th>
														<th>告警设备</th>
														<th>告警内容</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>1</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>
													<tr>
														<td>2</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>
													<tr>
														<td>3</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>
													<tr>
														<td>4</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>
													<tr>
														<td>5</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>
													<tr>
														<td>6</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>
													<tr>
														<td>7</td>
														<td>07/19 15:27</td>
														<td class="color-red priority">烟感</td>
														<td>烟雾报警</span>
														</td>
													</tr>

												</tbody>
											</table>
										</div>
									</div>
								</section>
							</div>
						</div>

					</div>
				</div>

			</div>
		</div>
		<section class="videocontent" id="video"></section>

		<script src="https://code.jquery.com/jquery.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="assets/js/vendor/bootstrap/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
		<script type="text/javascript" src="assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
		<script type="text/javascript" src="assets/js/vendor/videobackground/jquery.videobackground.js"></script>
		<script type="text/javascript" src="assets/js/vendor/blockui/jquery.blockUI.js"></script>

		<script src="assets/js/vendor/flot/jquery.flot.min.js"></script>
		<script src="assets/js/vendor/flot/jquery.flot.time.min.js"></script>
		<script src="assets/js/vendor/flot/jquery.flot.selection.min.js"></script>
		<script src="assets/js/vendor/flot/jquery.flot.animator.min.js"></script>
		<script src="assets/js/vendor/flot/jquery.flot.orderBars.js"></script>
		<script src="assets/js/vendor/easypiechart/jquery.easypiechart.min.js"></script>

		<script src="assets/js/vendor/rickshaw/raphael-min.js"></script>
		<script src="assets/js/vendor/rickshaw/d3.v2.js"></script>
		<script src="assets/js/vendor/rickshaw/rickshaw.min.js"></script>

		<script src="assets/js/vendor/morris/morris.min.js"></script>

		<script src="assets/js/vendor/tabdrop/bootstrap-tabdrop.min.js"></script>

		<script src="assets/js/vendor/summernote/summernote.min.js"></script>

		<script src="assets/js/vendor/chosen/chosen.jquery.min.js"></script>

		<script src="assets/js/minimal.min.js"></script>

		<script>
			$(function() {

				// Initialize card flip
				$('.card.hover').hover(function() {
					$(this).addClass('flip');
				}, function() {
					$(this).removeClass('flip');
				});

				// Initialize flot chart

				Morris.Bar({
					element: 'bar-example',
					data: [{
							y: '烟感',
							a: 42,
							b: 52
						},
						{
							y: '气感',
							a: 62,
							b: 69
						},
						{
							y: '门禁',
							a: 19,
							b: 22
						},
						{
							y: '井盖',
							a: 43,
							b: 51
						},
						{
							y: '路灯',
							a: 110,
							b: 128
						}
					],
					xkey: 'y',
					ykeys: ['a', 'b'],
					labels: ['2018-9', '2018-8'],
					hideHover: "auto",
					gridTextColor: "#fff",
					barColors: ['#ff4a43', '#1693A5']
				});

				$(window).resize(function() {
					// redraw the graph in the correctly sized div
					plot.resize();
					plot.setupGrid();
					plot.draw();
				});

				$('#mmenu').on(
					"opened.mm",
					function() {
						// redraw the graph in the correctly sized div
						plot.resize();
						plot.setupGrid();
						plot.draw();
					}
				);

				$('#mmenu').on(
					"closed.mm",
					function() {
						// redraw the graph in the correctly sized div
						plot.resize();
						plot.setupGrid();
						plot.draw();
					}
				);

				// tooltips showing
				$("#statistics-chart").bind("plothover", function(event, pos, item) {
					if(item) {
						var x = item.datapoint[0],
							y = item.datapoint[1];

						$("#tooltip").html('<h1 style="color: #418bca">' + months[x - 1] + '</h1>' + '<strong>' + y + '</strong>' + ' ' + item.series.label)
							.css({
								top: item.pageY - 30,
								left: item.pageX + 5
							})
							.fadeIn(200);
					} else {
						$("#tooltip").hide();
					}
				});

				//tooltips options
				$("<div id='tooltip'></div>").css({
					position: "absolute",
					//display: "none",
					padding: "10px 20px",
					"background-color": "#ffffff",
					"z-index": "99999"
				}).appendTo("body");

				//generate actual pie charts
				$('.pie-chart').easyPieChart();

				//server load rickshaw chart
				var graph;

				var seriesData = [
					[],
					[]
				];
				var random = new Rickshaw.Fixtures.RandomData(50);

				for(var i = 0; i < 50; i++) {
					random.addData(seriesData);
				}

				graph = new Rickshaw.Graph({
					element: document.querySelector("#serverload-chart"),
					height: 150,
					renderer: 'area',
					series: [{
						data: seriesData[0],
						color: '#6e6e6e',
						name: 'File Server'
					}, {
						data: seriesData[1],
						color: '#fff',
						name: 'Mail Server'
					}]
				});

				var hoverDetail = new Rickshaw.Graph.HoverDetail({
					graph: graph,
				});

				setInterval(function() {
					random.removeData(seriesData);
					random.addData(seriesData);
					graph.update();

				}, 1000);

				// Morris donut chart
				Morris.Donut({
					element: 'browser-usage',
					data: [{
							label: "Chrome",
							value: 25
						},
						{
							label: "Safari",
							value: 20
						},
						{
							label: "Firefox",
							value: 15
						},
						{
							label: "Opera",
							value: 5
						},
						{
							label: "Internet Explorer",
							value: 10
						},
						{
							label: "Other",
							value: 25
						}
					],
					colors: ['#00a3d8', '#2fbbe8', '#72cae7', '#d9544f', '#ffc100', '#1693A5']
				});

				$('#browser-usage').find("path[stroke='#ffffff']").attr('stroke', 'rgba(0,0,0,0)');

				// sortable table
				$('.table.table-sortable th.sortable').click(function() {
					var o = $(this).hasClass('sort-asc') ? 'sort-desc' : 'sort-asc';
					$('th.sortable').removeClass('sort-asc').removeClass('sort-desc');
					$(this).addClass(o);
				});

				//todo's
				$('#todolist li label').click(function() {
					$(this).toggleClass('done');
				});

				// Initialize tabDrop
				$('.tabdrop').tabdrop({
					text: '<i class="fa fa-th-list"></i>'
				});

				//load wysiwyg editor
				$('#quick-message-content').summernote({
					toolbar: [
						//['style', ['style']], // no style button
						['style', ['bold', 'italic', 'underline', 'clear']],
						['fontsize', ['fontsize']],
						['color', ['color']],
						['para', ['ul', 'ol', 'paragraph']],
						['height', ['height']],
						//['insert', ['picture', 'link']], // no insert buttons
						//['table', ['table']], // no table button
						//['help', ['help']] //no help button
					],
					height: 143 //set editable area's height
				});

				//multiselect input
				$(".chosen-select").chosen({
					disable_search_threshold: 10
				});

			})
		</script>
	</body>

</html>